<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>物联网卡设置</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="card-setting">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addCard">新增物联网卡</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search" :dropdown-option="dropdownOption"></search-form>
        </div>
      </search-btn-view>
      <div class="card-setting-table-div">
        <el-table fit stripe border :data="cardList" style="width: 100%" height="parent">
          <el-table-column label="物联网卡ID" prop="internetThingsCard" min-width="200px" align="center"></el-table-column>
          <el-table-column label="使用公司" prop="company" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="终端用户" prop="terminalUser" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="状态" prop="status" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('remoteEquipment.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="终端设备" prop="terminalDevice" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="设备类型" prop="deviceType" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="上位机" prop="upperComputer" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="操作" width="165px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="updateCard(scope.row)">修改</el-button>
              <el-button style="margin-left:0" size="mini" type="primary" @click="createQrcode(scope.row)">生成二维码</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <el-dialog :title="formType==='add'?'新增物联网卡':'修改物联网卡'" :visible.sync="openForm" top="10vh" width="600px" @closed="formClosed">
      <div style="height:calc(80vh - 54px);overflow:auto;">
        <card-form v-if="openForm" :card="selectCard" :type="formType" @save-success="saveSuccess"></card-form>
      </div>
    </el-dialog>

    <el-dialog title="二维码" :visible.sync="openQrCode" top="calc(50vh - 160px)" @closed="formClosed">
      <div>
        <card-code v-if="openQrCode" :card="selectCard"></card-code>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "./css/cardCode.css",
    "./css/cardForm.css"
  ], [
    "/static/vue/qrcode.min.js",
    "/vueSystem/i18n/index.js",
    "/vueSystem/js/checkVaildUtil.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>
<script src="./searchForm.js"></script>
<script src="./cardCode.js"></script>
<script src="./cardForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        internetThingsCard: "", //物联网卡id
        company: "", //所属公司
        terminalUser: "", //终端用户
        status: 1, //状态
        terminalDevice: "", //终端设备
        deviceType: "", //设备类型
        upperComputer: "" //上位机
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        cardList: [],
        dropdownOption: {
          companyList: []
        },
        openForm: false,
        openQrCode: false,
        formType: '',
        selectCard: null,
        i18n: i18n
      };
    },

    created: function () {
      this.loading = true;
      var self = this;
      Promise.all([
        this.setCompanyList(),
        this.setCardList(true, false)
      ]).then(function () {
        self.loading = false;
      }).catch(function () {
        self.loading = false;
      });
    },

    methods: {
      setCompanyList: function () {
        var self = this;
        return ajaxRequest('company/getAllCompany').then(function (companyList) {
          companyList = _.map(companyList, 'name');
          self.dropdownOption.companyList = companyList;
          return companyList;
        });
      },

      setCardList: function (isSearch, hasLoading) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        if (hasLoading === undefined) {
          hasLoading = true;
        }

        var search = this.search;
        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;

        var postData = {
          start: start,
          length: pageSize
        };

        var fields = ['internetThingsCard', 'company', 'terminalUser', 'status', 'terminalDevice',
          'deviceType', 'upperComputer'
        ];
        SysUtil.setPostData(postData, search, fields);

        var self = this;
        if (hasLoading) {
          this.loading = true;
        }
        return ajaxRequest('internetThingCard/getInternetThingCardPage', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var cardList = res.returnData;
          self.cardList = cardList;
          self.pagination.totalCount = res.iTotalRecords;
          if (hasLoading) {
            self.loading = false;
          }
        }).catch(function () {
          if (hasLoading) {
            self.loading = false;
          }
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setCardList(true);
      },

      pageChange: function () {
        this.setCardList();
      },

      addCard: function () {
        this.formType = 'add';
        this.openForm = true;
      },

      updateCard: function (card) {
        this.formType = 'update';
        this.selectCard = card;
        this.openForm = true;
      },

      saveSuccess: function () {
        this.openForm = false;
        this.setCardList();
      },

      createQrcode: function (card) {
        this.selectCard = card;
        this.openQrCode = true;
      },

      formClosed: function () {
        this.formType = '';
        this.selectCard = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      CardForm: CardForm,
      CardCode: CardCode
    }
  });

</script>
<style>
  .card-setting {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .card-setting .card-setting-table-div {
    flex: 1;
    overflow: auto;
  }

  .search-form .el-form .el-form-item {
    margin-bottom: 10px;
  }

  .search-form .el-form .el-form-item .search-input {
    width: 220px;
  }

</style>

</html>
